<template>
	<view class="shareGoods-wrapper wrapperLayer borderBox">
		<titleBar :titleText='"商品分享"' :pageForm='"shareGoods"'></titleBar>
		<view class="pageContent-container colRange borderBox">
			<view class="sharePic-container colRange">
				<view class="box-title borderBox">
					分享图片（只可选择一张图片）
				</view>
				<view class="goods-container rowCen">
					<scroll-view scroll-x class="picScroll rowCen">
						<block v-for="(item,index) in optionsInfo.images">
							<view class="picItems">
								<view class="pic-Container defImg">
									<image :src="item" mode=""></image>
									<image @tap="chooseImg(item,index)" class="hook" :src="'../../static/img/goods/'+(index==imgCurrent?'check.png':'nocheck.png')"
									 mode="aspectFill"></image>
								</view>
							</view>
						</block>
					</scroll-view>
				</view>
			</view>

			<view class="sharePic-container colRange">
				<view class="box-title borderBox">
					分享文案
				</view>
				<view class="copyWriting">
					<view class="textbox">
						{{optionsInfo.shopname}} {{optionsInfo.itemtitle}}</br>
						【原价】{{optionsInfo.itemprice}}元</br>
						【券后】{{optionsInfo.itemendprice}}元</br>
						{{platform==1?'【复制此信息打开手机淘宝即可查看并下单】':'【复制下方链接】'}}</br>
						{{platform==1?tpwd:code}}</br>
						{{optionsInfo.itemdesc=='' || optionsInfo.itemdesc==undefined?'':'【必买理由】' + optionsInfo.itemdesc}}
					</view>
				</view>
			</view>

			<view class="bottom-btnContainer rowRangeAve">
				<view class="btnbox copybtn rowRanges" @tap="copy()">
					<view>复制文案</view>
				</view>
				<view class="btnbox sharebtn rowRanges" @tap="drawCanvas()">
					<view>制作海报分享</view>
				</view>
			</view>
		</view>

		<u-toast ref="uToast" />
		
		<u-popup v-model="posterShow" mode="bottom" border-radius="22">
			<view class="model-container colRange">
				<view class="canvasbox" @tap="closeMode()">
					<image :src="posterImage || ''" mode="widthFix" class="posterImage"></image>
				</view>
				<view class="share-mode colRange">
					<view class="mode-title rowRanges">
						<view class="border-grey"></view>
						<view class="title-text">
							分享方式
						</view>
						<view class="border-grey"></view>
					</view>
					<view class="modeList-container rowRanges">
						<view class="mode-items colRanges" @tap="saveimg()">
							<view class="iconbox defImg">
								<image src="@/static/img/saveimg.png" mode="aspectFill"></image>
							</view>
							<view class="icontext">
								保存图片
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<r-canvas ref="rCanvas"></r-canvas>

	</view>
</template>

<script>
	import rCanvas from "@/components/r-canvas/r-canvas.vue"
	import titleBar from '../../components/customize/titlebar.vue'
	export default {
		components: {
			titleBar,
			rCanvas
		},
		data() {
			return {
				optionsInfo: '',
				imgCurrent: 0,
				textContent: '我就开始了放假哦撒娇佛萨加咖啡拉萨解放',
				posterShow: false,
				//平台
				platform: '',
				//跳转地址
				jump: '',
				template:null,
				//淘口令
				tpwd: '',
				//代码
				code: '',
				//海报图片
				posterImage:'',
				//当前选中的商品图片
				currentGoodPic:'',
			}
		},
		onReady() {
			// this.$nextTick(async () => {
			// 	let that = this
			// 	await this.$refs.rCanvas.init({
			// 		canvas_id: 'rCanvas',
			// 		background_color: '#fff',
			// 		canvas_width:375,
			// 		canvas_height:510,
			// 		hidden:true,
			// 		scale:1
			// 	}).catch(err=>{
			// 		this.error(err)
			// 	})
				
			// 	await this.$refs.rCanvas.drawImage({
			// 		url: '/static/img/logo.png',
			// 		x: 0,
			// 		y: 0,
			// 		w: 375,
			// 		h: 375,
			// 		border_radius:4
			// 	}).catch(err=>{
			// 		this.error(err)
			// 	})
				
			// 	await this.$refs.rCanvas.drawText({
			// 		text: '小米10【顺丰当天发+选无线充】xiaomi/小米10 5g手机骁龙865智能手机小米官方旗舰店5G手机正品小米10尊享版',
			// 		x: 20,
			// 		y: 412,
			// 		max_width:220,
			// 		font_size:18,
			// 		line_height:20,
			// 		line_clamp:2,
			// 		font_color: 'black'
			// 	}).catch(err=>{
			// 		this.error(err)
			// 	})
				
			// 	await this.$refs.rCanvas.drawImage({
			// 		url: '/static/img/qrcode.jpg',
			// 		x: 260,
			// 		y: 390,
			// 		w: 100,
			// 		h: 100,
			// 		border_radius:4
			// 	}).catch(err=>{
			// 		this.error(err)
			// 	})
				
			// 	await this.$refs.rCanvas.drawSpecialText({
			// 		general:{
			// 			x:20,
			// 			y:480,
			// 		},
			// 		list:[
			// 			{
			// 				text:'卷后价￥',
			// 				font_color:'red',
			// 				font_size:15
			// 			},
			// 			{
			// 				text:'5999',
			// 				font_color:'red',
			// 				font_size:24
			// 			},
			// 			{
			// 				text:' 原价',
			// 				font_color:'#b8b8b8',
			// 				font_size:15
			// 			},
			// 			{
			// 				text:'1000',
			// 				font_color:'#b8b8b8',
			// 				font_size:15
			// 			},
			// 		]
			// 	}).catch(err=>{
			// 		this.error(err)
			// 	})
				
			// 	// await this.$refs.rCanvas.drawLineTo({
			// 	// 	x: 20,
			// 	// 	y: 480,
			// 	// 	w: 100,
			// 	// 	h: 100,
			// 	// 	line_width:1,
			// 	// 	line_color:'#b8b8b8',
			// 	// }).catch(err=>{
			// 	// 	this.error(err)
			// 	// })
				
				
			// 	//this.$refs.rCanvas.ctx.strokeStyle = '#b8b8b8';
			// 	//this.$refs.rCanvas.ctx.moveTo(_strlineW, _strHeight - uni.upx2px(10)); //起点
			// 	//this.$refs.rCanvas.ctx.lineTo(_strlineW + _this.ctx.measureText(_this.OriginalTxt).width, _strHeight - uni.upx2px(10)); //终点
			// 	//this.$refs.rCanvas.ctx.stroke();
			// })
		},
		onLoad(options) {
			console.log(JSON.parse(options.info));
			debugger
			this.optionsInfo = JSON.parse(options.info);
			this.platform = this.optionsInfo.platform;
			debugger
			this.currentGoodPic = this.optionsInfo.images[0];
			this.getPrivilegeLink();
		},
		methods: {
			closeMode(e) {
				this.posterShow = false
			},
			copy() {
				var txtdata = this.optionsInfo.shopname +
					this.optionsInfo.itemtitle +
					'\n【原价】' +
					this.optionsInfo.itemprice +
					'元\n【券后】' +
					this.optionsInfo.itemendprice +
					(this.platform == 1 ? ('\n【复制此信息打开手机淘宝即可查看并下单】') : ('【复制下方链接】')) +
					'\n' + (this.platform == 1 ? this.tpwd : this.code) +
					'\n' +
					(this.optionsInfo.itemdesc === '' ? this.optionsInfo.itemdesc : ('【必买理由】' + this.optionsInfo.itemdesc))
				
				// #ifdef APP-PLUS
					uni.setClipboardData({
						data: txtdata,
						success: function () {
							uni.showModal({
								title: '复制成功',
								content: '内容已复制到粘贴板。', 
								showCancel:false,
								success: function(res) {
									if (res.confirm) {											 
										//console.log('用户点击确定');
									} else if (res.cancel) {
										//console.log('用户点击取消');
									}
								}
							});
						}
					});
				// #endif
				
				// #ifdef H5
				this.$utils.handleClipboard(txtdata, event, () => {
						uni.showToast({
							icon: 'none',
							title: '内容已复制到粘贴板。'
						})
					  }, () => {
						uni.showToast({
							icon: 'none',
							title: '复制失败'
						})
				})
				// #endif
			},
			getPrivilegeLink(){
				//淘宝
				debugger
				if(this.platform == 1){
					this.$u.api.tbPrivilegeLink({
						goodsId: this.optionsInfo.itemid
					}).then((res) => {
						this.tpwd = res.data.tpwd;
						this.jump = res.data.couponClickUrl;
					})
				//京东
				}else if(this.platform == 3){
					this.$u.api.jdPrivilegeLink({
						goodsId: this.optionsInfo.itemid
					}).then((res) => {
						this.jump = res.data.shortUrl
						this.code = res.data.shortUrl
					})
				//拼多多
				}else if(this.platform == 4){
					this.$u.api.pddPrivilegeLink({
						goodsId: this.optionsInfo.itemid
					}).then((res) => {
						this.jump = res.data.mobileShortUrl;
						this.code = res.data.mobileShortUrl
					})
				}
			},
			chooseImg(url, idx) {
				this.imgCurrent = idx;
				debugger
				this.currentGoodPic = url;
			},
			async getImageInfo(imgSrc) {
				return new Promise((resolve, errs) => {
					uni.getImageInfo({
						src: imgSrc,
						success: image => {
							resolve(image);
						},
						fail: err => {
							errs(err);
							uni.hideLoading()
						}
					});
				});
			},
			prevent() {
				return false
			},
			async createPoster(){
					let that = this
					await this.$refs.rCanvas.init({
						canvas_id: 'rCanvas',
						background_color: '#fff',
						canvas_width:375,
						canvas_height:510,
						hidden:true,
						scale:1
					}).catch(err=>{
						this.error(err)
					})
					//商品图
					let goodsPic = await this.getImageInfo(this.currentGoodPic); 
					await this.$refs.rCanvas.drawImage({
						url: goodsPic.path,
						x: 0,
						y: 0,
						w: 375,
						h: 375,
						border_radius:4
					}).catch(err=>{
						this.error(err)
					})
					
					//商品标题
					await this.$refs.rCanvas.drawText({
						text: this.optionsInfo.itemtitle,
						x: 20,
						y: 412,
						max_width:220,
						font_size:18,
						line_height:20,
						line_clamp:2,
						font_color: 'black'
					}).catch(err=>{
						this.error(err)
					})
					
					
					await this.$refs.rCanvas.drawImage({
						url: '/static/img/qrcode.jpg',
						x: 260,
						y: 390,
						w: 100,
						h: 100,
						border_radius:4
					}).catch(err=>{
						this.error(err)
					})
					
				// 	await this.$refs.rCanvas.drawSpecialText({
				// 		general:{
				// 			x:20,
				// 			y:480,
				// 		},
				// 		list:[
				// 			{
				// 				text:'卷后价￥',
				// 				font_color:'red',
				// 				font_size:15
				// 			},
				// 			{
				// 				text:'5999',
				// 				font_color:'red',
				// 				font_size:24
				// 			},
				// 			{
				// 				text:' 原价',
				// 				font_color:'#b8b8b8',
				// 				font_size:15
				// 			},
				// 			{
				// 				text:'1000',
				// 				font_color:'#b8b8b8',
				// 				font_size:15
				// 			},
				// 		]
				// 	}).catch(err=>{
				// 		this.error(err)
				// })
				
				var one;
				var two;
				var three;
				await this.$refs.rCanvas.drawText({
					text: '卷后价￥',
					x: 20,
					y: 480,
					font_color:'red',
					font_size:18,
					line_height:20,
				}).then(result=>{
					this.one = result.draw_width + 20;
				}).catch(err=>{
					this.error(err)
				})	
				
				await this.$refs.rCanvas.drawText({
					text: this.optionsInfo.itemendprice,
					x: this.one,
					y: 480,
					font_color:'red',
					font_size:18,
					line_height:20,

				}).then(result=>{
					this.two = this.one + result.draw_width + 10;
				}).catch(err=>{
					this.error(err)
				})	
				
				await this.$refs.rCanvas.drawText({
					text: '原价',
					x: this.two,
					y: 480,
					font_color:'#b8b8b8',
					font_size:15,
					line_height:20,
				}).then(result=>{
					this.three = this.two + result.draw_width + 5;
				}).catch(err=>{
					this.error(err)
				})
				
				await this.$refs.rCanvas.drawText({
					text: this.optionsInfo.itemprice,
					x: this.three,
					y: 480,
					font_size:15,
					line_height:20,
					font_color:'#b8b8b8',
					line_through_height:2,
					line_through_color: '#b8b8b8'
				}).then(result=>{
					
				}).catch(err=>{
					this.error(err)
				})
			},
			async drawCanvas(){
				await this.createPoster();
				// 生成海报
				await this.$refs.rCanvas.draw((result) => {
					// //延迟后渲染至canvas上
					this.posterShow = true
					this.posterImage = result.tempFilePath;
				}).catch(err=>{
					this.error(err)
				})
			},
			error(msg){
				uni.showModal({
					title:'错误信息',
					content:msg,
					showCancel:false
				})
			},
			saveimg() {
				// #ifdef  APP-PLUS
				uni.saveImageToPhotosAlbum({
					filePath: this.posterImage,
					success: res=> {
						this.$refs.uToast.show({
							title: '保存成功，快去分享吧~',
							type: 'success',
							position: 'bottom'
						})
					}
				});
				// #endif
				// #ifdef H5
				this.$utils.saveFile(this.posterImage);
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.shareGoods-wrapper {
		width: 100%;

		.pageContent-container {
			width: 100%;

			.sharePic-container {
				width: 100%;

				.box-title {
					width: 100%;
					padding: 20rpx 32rpx;
				}

				.goods-container {
					width: 100%;
					height: 265rpx;
					background-color: #FFFFFF;

					.picScroll {
						width: 100%;
						white-space: nowrap;
						padding: 0 32rpx;

						.picItems {
							display: inline-flex;
							margin-right: 20rpx;

							.pic-Container {
								width: 200rpx;
								height: 200rpx;
								border-radius: 8rpx;
								overflow: hidden;
								position: relative;

								.hook {
									width: 32rpx;
									height: 32rpx;
									z-index: 10;
									top: 5rpx;
									right: 5rpx;
									position: absolute;
								}
							}
						}
					}
				}

				.copyWriting {
					width: 100%;
					padding: 0 32rpx;

					.textbox {
						background: #FFFFFF;
						border-radius: 10rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
						line-height: 44rpx;
						padding: 20rpx 25rpx;
					}
				}
			}

			.bottom-btnContainer {
				width: 100%;
				padding: 0 85rpx;
				margin-top: 30rpx;

				.btnbox {
					width: 200rpx;
					height: 60rpx;
					border-radius: 30rpx;
					font-size: 24rpx;
					font-weight: 500;
				}

				.copybtn {
					color: #FF4242;
					background: #FDDFDF;
				}

				.sharebtn {
					color: #FFFFFF;
					background: #FC0000;
				}
			}
		}

		.model-container {
			width: 100%;
			background-color: transparent;

			.canvasbox {
				width: 100%;
				display: flex;
				justify-content: center;
			}

			.share-mode {
				width: 100%;
				margin-top: 80rpx;
				background-color: #FFFFFF;
				border-top-left-radius: 12rpx;
				border-top-right-radius: 12rpx;

				.mode-title {
					height: 60rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;

					.title-text {
						margin: 0 50rpx;
					}

					.border-grey {
						width: 70rpx;
						height: 1rpx;
						background-color: #EFF1F7;
					}
				}

				.modeList-container {
					width: 100%;

					.mode-items {
						width: 25%;
						height: 160rpx;

						.iconbox {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							overflow: hidden;
							z-index: 10;
						}

						.icontext {
							font-size: 28rpx;
							font-weight: 400;
							color: #333333;
							margin-top: 20rpx;
						}
					}
				}
			}
		}
	}

	.canvass {
		position: fixed;
		bottom: 0;
		pointer-events: none;
	}

	/deep/.u-drawer {
		.u-drawer-bottom {
			background-color: transparent !important;
		}
	}
</style>
